<template>
  <div ref="myRef" data-bs-toggle="tooltip" data-bs-placement="top"
       title="">
  </div>
</template>

<script>
import {ref, getCurrentInstance, onMounted} from 'vue'
import $ from "jquery";
import url from "@/router/api";
import {shuffle} from "@/util"

export default {
  name: "EvaluateModelView",
  setup() {
    const {proxy} = getCurrentInstance()
    const myRef = ref(null)

    let data = [];
    let name = [null];
    let amount = [null];

    onMounted(() => {
      renderChart();
    })

    let myChart = null

    const renderChart = () => {
      if (myChart === null) {
        myChart = proxy.$echarts.init(myRef.value)
      }

      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],

        series: [
          {
            name: 'Amount',
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
              normal: {
                color: '#4ad2ff'
              },
            },
            markPoint: {
              data: [{
                type: 'max', name: '最大值'
              },
                {
                  type: 'min', name: '最小值'
                }]
            },
            markLine: {
              data: [{type: 'average', name: '平均值'}]
            },
          }
        ]
      });

      setInterval(() => {
        getAmounts();

        myChart.setOption({
              xAxis: [
                {
                  data: name,
                }
              ],
              series: [
                {
                  data: amount
                }
              ]
            }
        )
      }, 5000);
    };



    const getAmounts = () => {
      $.ajax({
        url: url.amounts,
        type: "GET",
        success(resp) {
          if (resp.errorCode === "00000") {
            data = resp.data;
            let tempArr = []
            for (let i in data) {
              tempArr.push({
                name: i, amount: data[i]
              })
            }
            shuffle(tempArr)

            for (let am of tempArr) {
              name.push(am.name)
              amount.push(am.amount)
            }
            while (name.length > 10) {
              name.shift()
              amount.shift()
            }
          }
        },
        error(resp) {
          console.log(resp)
        }
      })
    };

    return {
      myRef,
    }
  }


}
</script>

<style scoped>

</style>
